<html window-corners="not-round" window-resizable="6px" window-width="900px" window-height="900px" window-alignment="5">
    <head>
        <title>Suunto Watch Simulator</title>
        <style>
			body{
				background:black;
			}
			main{
				size:*;
				width:668px;
				height:874px;
				background:url(img/watch_Phonex-x.png) no-repeat;
				background-size:cover;
				margin:*;
			}
			.watch{
				flow:stack;
				width:466px;
				height:466px;
				margin:* 200 * 86px;
				border-radius: 233px;
			}
			video{
				size:*;
				foreground-size:100% 100%;
				foreground-repeat: no-repeat;
				border-radius: 233px;
				//background:gold;
				//background:url(img/face.png) no-repeat;
				//background-size:cover;
				behavior:watch-screen video;
				//behavior: watch-drawing
				//cursor:pointer;
			}
        </style>
        <script>
			let radius = 233;
			document.on("mouseup", "video", (evt, elm)=>{
				// 点击的坐标（相对于自身左上角）
				let pt = {x:evt.x-elm.clientLeft - elm.offsetLeft, y:evt.y-elm.clientTop - elm.offsetTop};
				let distance = Math.sqrt(Math.pow(pt.x-radius,2)+Math.pow(pt.y-radius,2));
				if(distance<=radius)
				{
					elm.style["cursor"]="default";
					Window.this.frame.onWatchClick(pt.x, pt.y, false);
				}
					
			});
			document.on("mousedown", "video", (evt, elm)=>{
				let pt = {x:evt.x-elm.clientLeft - elm.offsetLeft, y:evt.y-elm.clientTop - elm.offsetTop};
				let distance = Math.sqrt(Math.pow(pt.x-radius,2)+Math.pow(pt.y-radius,2));
				if(distance<=radius)				
				{
					elm.style["cursor"]="pointer";
					Window.this.frame.onWatchClick(pt.x, pt.y, true);
				}
			});
			document.on("mousemove", "video", (evt, elm)=>{
				let pt = {x:evt.x-elm.clientLeft - elm.offsetLeft, y:evt.y-elm.clientTop - elm.offsetTop};
				let distance = Math.sqrt(Math.pow(pt.x-radius,2)+Math.pow(pt.y-radius,2));
				if(distance<=radius)
				{
					Window.this.frame.onWatchMove(pt.x, pt.y);
				}
				else
				{
					elm.style["cursor"]="default";
					Window.this.frame.onWatchClick(pt.x, pt.y, false);
				}
					
				
			});
			//document.on("mouseout", "video", (evt, elm)=>{
			//	let pt = {x:evt.x-elm.clientLeft - elm.offsetLeft, y:evt.y-elm.clientTop - elm.offsetTop};
			//	Window.this.frame.onWatchClick(pt.x, pt.y, false);
			//});
        </script>
    </head>
    <body>
		<main>
			<div class="watch">
				<video />
			</div>
		</main>
    </body>
</html>